import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'
import HelloWorld from './components/HelloWorld'
import LikeButton from './components/LikeButton'
import UseEffectDemo from './components/UseEffectDemo'
import MouseTracker from './components/MouseTracker'
import useMousePosition from './hooks/useMousePosition'
import useURLLoader from './hooks/useURLLoader'

interface IShowResult {
	message: string
	status: string
}

interface IThemeProps {
	[key: string]: {
		color: string
		background: string
	}
}

const themes: IThemeProps = {
	light: {
		color: '#000',
		background: '#eee'
	},
	dark: {
		color: '#fff',
		background: '#222'
	}
}

export const ThemeContext = React.createContext(themes.light)

function App() {
	const [show, setShow] = useState(true)
	const positions = useMousePosition()
	const { data = {}, loading } = useURLLoader(
		'https://dog.ceo/api/breeds/image/random',
		[show]
	)
	const [theme, setTheme] = useState('dark')

	const dogResult = data as IShowResult

	return (
		<div className="App">
			<ThemeContext.Provider value={themes[theme]}>
				<header className="App-header">
					<img src={logo} className="App-logo" alt="logo" />
					<p>
						<button onClick={() => setShow(!show)}>Toggle Tracker</button>
					</p>
					{loading ? (
						<p>🐶 读取中</p>
					) : (
						<img src={dogResult && dogResult.message} alt="" />
					)}
					<a
						className="App-link"
						href="https://reactjs.org"
						target="_blank"
						rel="noopener noreferrer"
					>
						Learn React
					</a>
					<HelloWorld></HelloWorld>
					<div>
						<div>自定义 hook</div>
						X: {positions.x}, Y: {positions.y}
					</div>
					<div>
						like button useEffect
						<LikeButton></LikeButton>
					</div>
					<div>
						useEffect
						<UseEffectDemo />
					</div>
					<div>{show && <MouseTracker />}</div>
					<div>
						<button
							onClick={() => {
								theme === 'dark' ? setTheme('light') : setTheme('dark')
							}}
						>
							change theme
						</button>
					</div>
				</header>
			</ThemeContext.Provider>
		</div>
	)
}

export default App
